<template>
	<view>
		<view v-for="(item,index) in list" :key="index" v-if="item.issue && item.opencode"
			:class="`history_list ${!index&&showGGl?'hide':''}`" style="background: rgb(255, 255, 255);">
			<view class="fenceng">
				<view class="left_info" style="align-items: center;"><text>期号</text>
				</view>
				<view class="right_info" style="color: rgb(126, 124, 124);"> 第{{item.issue}}期
					<!-- <view @click="liveShow(item)" v-if="showlive!==3" class="btn_video"> 直播
					</view> -->
				</view>
			</view>
			<view class="fenceng">
				<view class="left_info" style="align-items: center;">
					<text>开奖时间</text>
				</view>
				<view class="right_info" style="color: rgb(126, 124, 124);">{{item.opentime}}</view>
			</view>
			<view class="fenceng" style="margin-bottom: 0px;">
				<view class="left_info"><text>中奖号码</text></view>
				<view class="right_info">
					<view class="open_code_zone_left-content">
						<view class="open_code_zone_left-item" style="opacity: 1;"
							v-for="(i,n) of item.opencode.split(',').slice(0, 6)"
							:style="opacityType(item.zodiac.split(',')[n].split('/')[0],n)">
							<view class="open_code_zone_left-item-number"
								:style="judgingStyle(item.wave.split(',')[n])">
								<text>{{i}}</text>
							</view>
							<view class="open_code_zone_left-item-zodiac"><text
									style="opacity: 1;">{{item.zodiac.split(',')[n]}}</text></view>
						</view>
						<view class="open_code_zone_left-item">
							<view class="open_code_zone_left-item-plus"><text>+</text>
							</view>
							<view class="open_code_zone_left-item-zodiac"><text style="opacity: 0;">澳</text></view>
						</view>
						<view class="open_code_zone_left-item"
							:style="opacityType(item.zodiac.split(',')[item.zodiac.split(',').length-1].split('/')[0],6)">
							<view class="open_code_zone_left-item-number"
								:style="judgingStyle(item.wave.split(',')[item.wave.split(',').length-1])">
								<text>{{item.opencode.split(',')[item.opencode.split(',').length-1]}}</text>
							</view>
							<view class="open_code_zone_left-item-zodiac"><text
									style="opacity: 1;">{{item.zodiac.split(',')[item.zodiac.split(',').length-1]}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="history_list_loading" v-if="list.length<=1" style="height: 115px;">
			<u-loading-icon mode="semicircle" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;"
				color="#3b5aa5" show></u-loading-icon>
		</view>
		<view style="height: 160px;"></view>
		<u-popup :show="videoShow" bgColor="transparent" :round="10" mode="center">
			<view class="mask">
				<view class="mask-inner">
					<view class="mask-title">
						<view class="mask-title-l">
							<view>{{lhcname}}</view>
							<view class="huifang">回放</view>
						</view>
						<view class="mask-title-r">
							<view><span>第</span><span
									style="padding: 0px 2px; color: rgb(26, 61, 150);">{{liveitem.issue}}</span><span>期</span><span
									style="padding-left: 0.213rem;">{{liveitem.opentime}}</span></view>
							<view style="padding-left: 10%; padding-top: 0.107rem; padding-bottom: 0.107rem;">
								<view class="open_code_zone_left-content" showopen="false">
									<view class="open_code_zone_left-item"
										v-for="(item,index) of liveitem.opencode.split(',').slice(0, 6)" :key="index">
										<view class="open_code_zone_left-item-number"
											:style="judgingStyle(liveitem.wave.split(',')[index],true)">
											<span>{{item}}</span>
										</view>
										<view class="open_code_zone_left-item-zodiac"><span
												style="opacity: 1;">{{liveitem.zodiac.split(',')[index]}}</span>
										</view>
									</view>
									<view class="open_code_zone_left-item">
										<view class="open_code_zone_left-item-plus"><span>+</span></view>
										<view class="open_code_zone_left-item-zodiac"><span style="opacity: 0;">澳</span>
										</view>
									</view>
									<view class="open_code_zone_left-item">
										<view class="open_code_zone_left-item-number"
											:style="judgingStyle(liveitem.wave.split(',')[liveitem.wave.split(',').length-1],true)">
											<span>{{liveitem.opencode.split(',')[liveitem.opencode.split(',').length-1]}}</span>
										</view>
										<view class="open_code_zone_left-item-zodiac">
											<span
												style="opacity: 1;">{{liveitem.zodiac.split(',')[liveitem.zodiac.split(',').length-1]}}</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="video-box">
						<video controls="" autoplay="" id="mui-player" :src="liveitem.liveUrl"></video>
					</view>
				</view>
				<view class="close" @click="videoShow=false"><svg t="1717575175018" class="icon" viewBox="0 0 1024 1024"
						version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4269" width="32" height="32">
						<path
							d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
							fill="#ffffff" p-id="4270"></path>
					</svg></view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex'
	// import {
	// 	videoUrl
	// } from '@/common/config.js'
	export default {
		name: "prizeinfo",
		data() {
			return {
				videoShow: false,
				liveitem: {
					"issue": null,
					"opencode": "正,在,进,行,搅,珠,中",
					"zodiac": "",
					"opentime": "",
					"wave": "bl,green,green,red,red,red,red",
					"info": "數據來源macaujc.com"
				},
			};
		},
		props: {
			showGGl: Boolean,
			videoUrl: '',
			showlive: 0,
			lhcname: '',
			list: {
				type: Array,
				default: () => [{
					"issue": "2024155",
					"opencode": "11,38,43,19,40,07,35",
					"zodiac": "馬,兔,狗,狗,牛,狗,馬",
					"opentime": "2024-06-03 21:32:32",
					"type": "macaujc3",
					"wave": "green,green,green,red,red,red,red",
					"info": "數據來源macaujc.com"
				}] // 设置默认值
			},
			positions: {
				type: Array,
				default: () => [] // 设置默认值
			},
			conditions: {
				type: Array,
				default: () => [] // 设置默认值
			},
		},
		watch: {
			showGGl(newVal, oldVal) {
				console.log(newVal, oldVal);
			},
			list(newVal, oldVal) {
				console.log('zzzzzzzzzzzzzz', newVal, oldVal);
			},

		},
		computed: {
			...mapState(['winningStyle']),
			...mapGetters(['judgingStyle']),
			opacityType() {
				return (i, n) => {
					if (this.conditions.length == 0 && this.positions.length == 0) {
						return 'opacity: 1;'
					}
					if (this.conditions.includes(i)) {
						return 'opacity: 1;'
					}
					if (this.positions.includes('平一') && n == 0) {
						return 'opacity: 1;'
					}
					if (this.positions.includes('平二') && n == 1) {
						return 'opacity: 1;'
					}
					if (this.positions.includes('平三') && n == 2) {
						return 'opacity: 1;'
					}
					if (this.positions.includes('平四') && n == 3) {
						return 'opacity: 1;'
					}
					if (this.positions.includes('平五') && n == 4) {
						return 'opacity: 1;'
					}
					if (this.positions.includes('平六') && n == 5) {
						return 'opacity: 1;'
					}
					if (this.positions.includes('特码') && n == 6) {
						return 'opacity: 1;'
					}
					return 'opacity: 0.1;'
				}
			}
		},
		methods: {
			liveShow(item) {
				uni.showLoading()
				console.log(item, "ccccccc")
				this.liveitem = item
				this.liveitem.liveUrl = `${this.videoUrl}${item.videoUrl}`
				this.videoShow = true
				uni.hideLoading()
			},
		}
	}
</script>

<style scoped lang="scss">
	.hide:after {
		position: absolute;
		content: "";
		display: block;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		-webkit-backdrop-filter: blur(50px);
		backdrop-filter: blur(50px);
	}

	.mask {
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		// background-color: rgba(0, 0, 0, .5);

		.mask-inner {
			width: 100%;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			background-color: #fff;
			z-index: 1000;

			.video-box {
				height: 235px;
				position: relative;
				top: 15px;

				#mui-player {
					width: 100%;
					height: 100%;
				}
			}

			.mask-title {
				padding: 15px;
				padding-bottom: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.mask-title-r {
					font-size: 13px;
					white-space: nowrap;
					color: #000;
					font-weight: 700;

					.open_code_zone_left-content {
						display: flex;
						justify-content: space-between;
						width: 100%;

						.open_code_zone_left-item {
							.open_code_zone_left-item-plus {
								height: 26px;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 11px;
								color: #da0f1f;
							}

							.open_code_zone_left-item-zodiac {
								font-size: 12px;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.open_code_zone_left-item-number {
								width: 26.48px;
								height: 26.48px;
								background-color: #ccc;
								font-size: 15px;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}

				.mask-title-l {
					font-size: 15px;
					color: #333;
					font-weight: 700;
					display: flex;
					align-items: center;

					.huifang {
						background-color: #1a3d96;
						color: #fff;
						border-radius: 20px;
						height: 25px;
						line-height: 25px;
						padding: 0 8px;
						text-align: center;
						font-size: 15px;
						margin-left: 5px;
					}
				}

			}
		}

		.close {
			position: absolute;
			right: .213rem;
			top: .427rem;
			z-index: 1001;
		}
	}

	.history_list_loading {
		padding: 8px .107rem 0;
		position: relative;
	}

	.history_list {
		padding: 8px .107rem 0;
		border-bottom: .027rem solid #a19999;
		position: relative;

		.fenceng {
			display: flex;
			margin-bottom: 5px;

			.left_info {
				font-weight: 700;
				color: #1a3d96;
				font-size: 13px;
				text-align: right;
				width: 16%;
				display: flex;
				justify-content: flex-end;
			}

			.right_info {
				font-weight: 700;
				font-size: 14px;
				text-align: left;
				flex: 1;
				display: flex;
				margin-left: .16rem;

				.open_code_zone_left-content {
					display: flex;
					justify-content: space-between;
					width: 90%;

					.open_code_zone_left-item {
						.open_code_zone_left-item-plus {
							height: 35px;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20px;
							color: #da0f1f;
							font-weight: bolder;
						}

						.open_code_zone_left-item-number {
							width: 38px;
							height: 38px;
							background-color: #ccc;
							font-size: 19px;
							display: flex;
							align-items: center;
							justify-content: center;
							text-align: center;
							line-height: 38px;
						}

						.open_code_zone_left-item-zodiac {
							font-size: 12px;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				.btn_video {
					font-style: normal;
					border-radius: 15px;
					padding: 0 7px;
					color: #fff;
					background: #1a3d96;
					font-size: 10px;
					text-align: center;
					height: 17px;
					line-height: 17px;
					margin-left: 5px;
				}
			}
		}
	}
</style>